<template>
  <div v-loading="loading" element-loading-text="拼命加载中...">

    <!-- 顶部信息 -->
    <el-page-header v-if="showPageHeader" class="box-shadow mb-3" icon="arrow-left" @back="handleGoBack">
      <template #extra>
        <div class="flex items-center">
          <el-button icon="refresh" @click="handleRefresh">刷新信息</el-button>
          <el-button icon="arrow-left" @click="handleGoBack">返回上页</el-button>
        </div>
      </template>
    </el-page-header>

    <!-- 内容信息 -->
    <div :class="{'app-container-main': showPageHeader}">
      <el-card class="content-card">
        <div class="info-box">
          <div class="image">
            <UploadImage v-model="formData.avatar_url" :disabled="true" height="42px" width="42px"/>
          </div>
          <div class="info">
            <span class="name">{{ formData.nickname }}</span>
            <span class="name">{{ formData.account }}</span>
          </div>
        </div>
      </el-card>

      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="基本信息" name="baseInfo">
          <el-card class="content-card">
            <el-descriptions :column="responsiveState.column" title="用户信息">
              <el-descriptions-item :width="descriptionsItemWidth" label="用户编号：">
                <span>{{ formData.id }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="用户账号：">
                <span>{{ formData.account }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="邀请码：">
                <span>{{ formData.invite_code }}</span>
              </el-descriptions-item>

              <el-descriptions-item :width="descriptionsItemWidth" label="用户昵称：">
                <span>{{ formData.nickname }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="状态标识：">
                <MultipleTag :flag-val="formData.special_flag" :options="specialFlagOptions" default-name="无"/>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="邀请人：">
                <span v-if="formData.parent_id > 0">{{ formData.parent_account }} / {{ formData.parent_id }}</span>
                <span v-else>-</span>
              </el-descriptions-item>

              <el-descriptions-item :width="descriptionsItemWidth" label="登录状态：">
                <DictTag v-model="formData.login_status" :circle="false" dict-type="user_login_status"/>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="最后登录：">
                <span>{{ formData.last_login_time || '-' }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="归属地区：">
                <span>{{ formData.location || '-' }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>

          <el-divider border-style="dashed"/>

          <el-card class="content-card">
            <el-descriptions :column="responsiveState.column" title="资金信息">
              <el-descriptions-item :width="descriptionsItemWidth" label="花朵：">
                <span>{{ toDecimal(formData.integral, 4) }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="余额：">
                <span>{{ toDecimal(formData.balance, 4) }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="创客奖励：">
                <span>{{ toDecimal(formData.bonus_zj, 4) }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="合伙人奖励：">
                <span>{{ toDecimal(formData.bonus_hhr, 4) }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="补贴线上：">
                <span>{{ toDecimal(formData.subsidy_xs, 4) }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="补贴线下：">
                <span>{{ toDecimal(formData.subsidy_xx, 4) }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="消费金余额：">
                <span>{{ toDecimal(formData.balance_xfj, 4) }}</span>
              </el-descriptions-item>

              <el-descriptions-item :width="descriptionsItemWidth" label="累计消费：">
                <span>{{ toDecimal(formData.consume_total, 4) }}</span>
              </el-descriptions-item>

              <el-descriptions-item :width="descriptionsItemWidth" label="额外奖励：">
                <span>{{ toDecimal(formData.bonus_extra, 4) }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="赠送贡献值：">
                <span>{{ toDecimal(formData.contribution_total, 4) }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="剩余贡献值：">
                <span>{{ toDecimal(formData.contribution_value, 4) }}</span>
              </el-descriptions-item>

              <el-descriptions-item :width="descriptionsItemWidth" label="商家花朵：">
                <span>{{ toDecimal(formData.merchant_jf, 4) }}</span>
              </el-descriptions-item>

              <el-descriptions-item :width="descriptionsItemWidth" label="用户级别：">
                <DictTag v-model="formData.user_level" dict-type="user_level" :circle="false"/>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="私域级别：">
                <DictTag v-model="formData.private_level" dict-type="private_level" :circle="false"/>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="私域套数：">
                <span>{{ formData.private_count || '-' }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>

          <el-divider border-style="dashed"/>

          <el-card class="content-card">
            <el-descriptions :column="responsiveState.column" title="软件信息">
              <template #title>
                <span>软件信息</span>
                <el-button v-permission="'api:user:modify_level'" style="margin-left: 1rem" icon="CirclePlus" plain type="primary" size="small" @click="handleModifySoftwareCount">操作
                </el-button>
              </template>
              <el-descriptions-item :width="descriptionsItemWidth" label="剩余软件数：">
                <span>{{ formData.software_count }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="转赠软件数：">
                <span>{{ formData.software_trans }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="">
                <span></span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>

          <el-divider border-style="dashed"/>

          <el-card class="content-card">
            <el-descriptions :column="responsiveState.column" title="实名信息">
              <el-descriptions-item :width="descriptionsItemWidth" label="认证状态：">
                <DictTag v-model="certifyData.status" :circle="false" dict-type="user_certify_status"/>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="证件名称：">
                <span>{{ certifyData.name || '-' }}</span>
              </el-descriptions-item>
              <el-descriptions-item :width="descriptionsItemWidth" label="证件号码：">
                <span>{{ certifyData.identity_card_no || '-' }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="账单记录" name="billList">
          <UserBillLog :id="id"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>

import { useRoute } from 'vue-router';
import { useTabsNavStore } from '@/store';
import { h, onMounted, ref } from 'vue';
import { defUserCertifyData, defUserInfoData, modifyUserSoftwareCount, userInfo } from '@/api/api-user.ts';
import { ElLoading, ElMessageBox, ElNotification, TabsPaneContext } from 'element-plus';
import { useResponsiveState } from '@/hooks/use-responsive-state.ts';
import { DictTag } from '@/components/dict-tag';
import { MultipleTag } from '@/components/other';
import { specialFlagOptions } from '@/utils/global-dict.ts';
import UserBillLog from './user-bill-log.vue'
import { toDecimal } from '@/utils';
import { isImageUrl } from '@/utils/is.ts';
import { getAssetsImage } from '@/utils/util.ts';
import { UploadImage } from '@/components/upload';

const props = defineProps({
  id: {
    type: Number,
    required: true
  },
  showPageHeader: {
    type: Boolean,
    default: true
  }
});

const currentRoute = useRoute();
const tabsNavStore = useTabsNavStore();
const loading = ref(false);
const descriptionsItemWidth = ref('120px')

/** 初始化 **/
onMounted(async () => {
  handleRefresh();
})

// 数据信息
const formData = ref({...defUserInfoData});
const certifyData = ref({...defUserCertifyData});
const activeName = ref('baseInfo')

// 加载用户信息
const initData = (id: number) => {
  if (!id || id <= 0) {
    return
  }
  loading.value = true;
  userInfo(id).then(res => {
    const {info, certify} = res.data;
    formData.value = info;
    certifyData.value = certify;
  }).finally(() => loading.value = false)
}

// Tab 点击事件
const handleTabClick = (tab: TabsPaneContext, event: Event) => {

}

// 刷新数据
const handleRefresh = () => {
  formData.value = {...defUserInfoData};
  certifyData.value = {...defUserCertifyData};
  initData(props.id);
};

// 返回上一页
const handleGoBack = () => {
  tabsNavStore.delView(currentRoute);
  window.history.back();
};

const responsiveState = useResponsiveState(
    {
      ['lg']: {column: 3},
      ['sm']: {column: 2},
      ['xs']: {column: 1},
    },
    {column: 3,},
);

defineExpose({initData});

/** 用户软件数量修改 */
const handleModifySoftwareCount = () => {
  // 弹窗提示
  ElMessageBox.prompt(h('p', null, ['是否修改账号 ', h('span', {style: 'font-weight: bold'}, formData.value.account), ' 的软件数量？',]), '提示', {
    type: 'warning',
    closeOnClickModal: false,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPlaceholder: '请输入操作的软件数量',
    inputPattern: /^[+-]?\d+?$/,
  }).then(({value}) => {
    let newValue = parseInt(value) || 0
    const loading = ElLoading.service({
      lock: true,
      text: '正在提交中...',
      background: 'rgba(0, 0, 0, 0.2)'
    })
    modifyUserSoftwareCount({account: formData.value.account, count: newValue}).then(() => {
      // 提示信息
      ElNotification({title: '成功', message: '操作成功', type: 'success', duration: 2000})
      // 刷新列表数据
      handleRefresh();
    }).finally(() => loading.close())
  }).catch(() => {

  });
};

</script>

<style lang="scss" scoped>
:deep() {
  .el-descriptions__label {
    margin-right: 0;
    display: inline-block;
    min-width: 82px;
    vertical-align: top;
  }

  .el-descriptions__cell {
    vertical-align: top;
  }

  .el-divider--horizontal {
    margin: 8px 0;
  }
}

.info-box {
  display: flex;

  .image {
    display: flex;

    .el-image {
      width: 42px;
      height: 42px;
      border-radius: 6px;
      border: 1px solid var(--el-border-color);
    }
  }

  .info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 13px;
    margin-left: 8px;

    .name {
      height: 1.3rem;
      line-height: 1.2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

</style>
